{% include 'layout/layout_header.html' %}
<!-- 顶部导航区域 -->
{% include 'layout/layout_nav.html' %}
<!-- 左侧导航区域 -->
{% include 'layout/layout_menu.html' %}

    <div style="margin:10px;">
      <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-md4">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-username"></i>
            </div>
            <input type="text" name="A" value="" placeholder="Field A" class="layui-input" lay-affix="clear">
          </div>
        </div>
        <div class="layui-col-md4">
          <div class="layui-input-wrap">
            <input type="text" name="B" placeholder="Field B" lay-affix="clear" class="layui-input">
          </div>
        </div>
        <div class="layui-col-md4">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-date"></i>
            </div>
            <input type="text" name="C" readonly placeholder="Field C" class="layui-input demo-table-search-date">
          </div>
        </div>
        <div class="layui-btn-container layui-col-xs12">
          <button class="layui-btn" lay-submit lay-filter="demo-table-search">Search</button>
          <button type="reset" class="layui-btn layui-btn-primary">Clear</button>
        </div>
      </form>
      <table class="layui-hide" id="user-search"></table>
    </div>

  {% include 'layout/layout_footer.html' %}


<!-- 工具栏模板 -->
<script type="text/html" id="feedback-toolbar">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">回复</button>
  </div>
</script>

<script type="text/javascript">

//JS
layui.use(function(){
  var element = layui.element;
  var layer = layui.layer;
  var util = layui.util;
  var $ = layui.$;
  var table = layui.table;
  var laydate = layui.laydate;
  var form = layui.form;

  // 创建表格实例
  table.render({
    elem: '#user-search',
    url: '/adm/feedback/index?ajax=1', // 此处为静态模拟数据，实际使用时需换成真实接口
    cols: [[
      {field:'feedback_id', title: 'ID', width:80, sort: true, fixed: true},
      {field:'user_id', title: '反馈用户ID', width: 120},
      {field:'app_vsn', title: 'APP版本', width: 100},
      {field:'type', title: '反馈类型', width: 100},
      {field:'rating', title: '反馈评级', width: 100},
      {field:'body', title: '反馈内容', width: 300},
      {field:'attach', title: '反馈内容附件', width: 120},
      {field:'reply_count', title: '回复数量', width: 100},
      {field:'device_id', title: '设备ID', width: 154},
      {field:'client_operating_system', title: '设备类型', width: 100},
      {field:'client_operating_system_vsn', title: '设备版本', width: 200},
      {field:'status', title: '状态', width: 85, templet: function(d) {
          if(d.sex === '男'){
            return '<span style="color: blue">♂</span>';
          } else {
            return '<span style="color: pink">♀</span>';
          }
        }},
      {field:'updated_at', title: '', width: 100},
      {field:'created_at', title: '反馈时间', width: 100},
      {fixed: 'right', title:'操作', minWidth: 128, toolbar: '#feedback-toolbar'}
    ]],
    height: 500,
    page: true,
    limit: 10,
    limits:[10, 20, 80, 160, 300],
    request: {
      pageName: 'page',
      limitName: 'size'
    },
    parseData: function(res){ // res 即为原始返回的数据
      return {
        "code": res.code, // 解析接口状态
        "msg": res.msg, // 解析提示文本
        "count": res.payload.total, // 解析数据长度
        "data": res.payload.list // 解析数据列表
      };
    }
  });
  // 日期
  laydate.render({
    elem: '.demo-table-search-date'
  });
  // 搜索提交
  form.on('submit(demo-table-search)', function(data){
    var field = data.field; // 获得表单字段
    // 执行搜索重载
    table.reload('user-search', {
      page: {
        curr: 1 // 重新从第 1 页开始
      },
      where: field // 搜索的字段
    });
    layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
    return false; // 阻止默认 form 跳转
  });
});
</script>
